<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-menu-button></ion-menu-button>
    </ion-buttons>
    <ion-title>配置</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true">
  <ion-header collapse="condense">
    <ion-toolbar>
      <ion-title size="large">配置</ion-title>
    </ion-toolbar>
  </ion-header>

  <ion-list>
    <ion-item>
      <ion-label position="fixed">数据库目录</ion-label>
      <ion-input type="text" [(ngModel)]="config.dataBasePath" readonly></ion-input>
    </ion-item>
    <ion-item-group>
      <ion-list-header>
        <ion-label>索引的扩展文件名</ion-label>
        <ion-button fill="outline" (click)="addExt()">增加</ion-button>
      </ion-list-header>
      <ion-item *ngFor="let ext of config.exts;let i = index">
        <ion-icon slot="start"></ion-icon>
        <ion-badge slot="start" color="primary">{{i+1}}</ion-badge>
        <ion-label>{{ ext }}</ion-label>
        <ion-buttons slot="end">
          <ion-button color="danger" fill="outline" (click)="delExt(ext)">删除</ion-button>
        </ion-buttons>
      </ion-item>
    </ion-item-group>
    <ion-item-group>
      <ion-list-header>
        <ion-label>忽略目录</ion-label>
        <ion-button fill="outline" (click)="addIgnore()">增加</ion-button>
      </ion-list-header>
      <ion-item *ngFor="let dir of config.ignore;let i = index">
        <ion-icon slot="start"></ion-icon>
        <ion-badge slot="start" color="primary">{{i+1}}</ion-badge>
        <ion-label>{{ dir }}</ion-label>
        <ion-buttons slot="end">
          <ion-button color="danger" fill="outline" (click)="delIgnore(dir)">删除</ion-button>
        </ion-buttons>
      </ion-item>
    </ion-item-group>
  </ion-list>
</ion-content>
